<template>

  <vue-accordion
    :items="items" style="background-color: brown">
    <!--<img :src="item.src">-->
  </vue-accordion>
</template>

<script>
  import Vue from 'vue'
  import {vueAccordion} from 'vue-accordion'
  import img1 from './img/12345.png'
  import img2 from './img/2.png'
  import img3 from './img/12345.png'
  import img4 from './img/4.png'
  import img5 from './img/12345.png'
export default {
  data () {
    return {
          items:[
            {src:'https://www.baidu.com/link?url=vekv8G_QZerZrdU4KsGPwS7n2YwRmaoLuxOZR5dGZoQcViSh3udocEOu-99E29cABFyugnYHpk9vg8Q3Ejo0i1LEpEXx5w7Ap1gEjow0PmNOxST0EFVHaAL2fPiijiEAcZnRQnlvQfSFNoSXVTzESd89EbLsZf8elTyoiaFZjT2tCuJ6YGcbSSWvLEJZ8VAWBy6HXZbT3xOvY5cqwlEUOjEy4XZRks900dne7tS4LXcR-j37ZtIpOmo4yezTEyJg5o541NW1xkp3gUiDEAG5YO387vUHLehOosopjZgdIUiTitGHXOVKH6ObKWDxqbvjuyi0mQCGkPGz8b6JXJmHv8xGPXdquVrCt7Ig5R-eNGWMS8JobnRWtpFgDI7QPms9JuE6B7_SlIVIbwI5fgBXp5dBDAwpgneM_0j2z1MLA4CSgBrqHmyTc_Sbcr76SW1eq9ETWWka2uoGFZ8N7lnvHtq0fWQ4NeybawPoE2tW_lHXUGUxwk3BfF3QBVxLOEmP-R63o3uGMNRxgZC8JAvSGM50kmKgbayku4d0CmcuYyKhLnKs-h9b5BEIHT85LsL6u0BYhzwbHCY0BFyqc2D5LKw6Tx2ZzVnSS08avnbJ1LbBRGyA91Vt_IC39On9zn8O&timg=&click_t=1522475698390&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=dnfPa_1n_OQ65rTKa_ov4VHPBwSNOGh7DGPbVNY-Ut0bYE0N7OL1JvBho2avc4_Hn0diS-Vwu9kTfqETOKvBhJnHb-PGBucQQxwawC_6wNE8OnxrKM167vpcxzjgYtQ59QVFrr5dkne7AI2uSPfREtU992YGrHrGb75AWWX_5vhC4km41j4RIw2A4Quh7RIkfCdUrQzXL-12knFz6mzdNjVltlmUl8P5hVLw94L7uR9yEAGCgYkzQtQRO06vKw1gUZkBZrROGFMUhqLyc_1XVCgvM2n1b1ahUMDsMqbeL_uROJqWK69I_xbGrAd1rCvylo63izY6ak_MdpwRis2TJxGMthZZ9x2qS9_43JMpfRXOLk46qIm8ZOOPEvSUYAnHndcn_b5yZrrC-PpC8o6G8EcP-UkG-HDfyamCS721ZlIyHHK0ZKOYR02_kz58alPforDEhPjgTY1T6jJPNMxy9R5HsWtXqLevmTidxUw_Q47bn3MV2e86jHxphk6ag2dfJemsAdxZs6VUyUxulxo5GdmNCyoQgVzYBdIf2bEdeo11INYLRfT_SS2zROjMdPSCOmFf9XpPu6VTriGBlufUTK&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3D52ad19a3381d018bc0d31076f2be9e16%26src%3Dhttp%3A%2F%2Fimg01.taopic.com%2F160625%2F235106-1606250Q05845.jpg&click_t=1522475714287&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=8Yey44QkliuqsOuEN89WUZcEpG53KSUxqt8cVh98zjCeYP2piYLh2w3g2x7qU8tzUmFTcN7PjI-L8ey6BqHhegXVGXnQX8MGxw9ml6-lWYu79B4DbXhL6OISD-U5aYh6HfznAgP9wF5xd2Uvg1OsW19yEuxMTo_up2ouRNVmf8vpmpsX1PpBCZpfQdh0dNMf36-5xtHUDnPnNOGHHE8HpIqZBVjG72nmbdGLdinfFDEqYNELvQxMOQLD_V_AzTXAQiypt8SnXkwSEGKXybQ_JzfaGQBgFm-uOC96WMgpw_Q90N6B8H7rCJ_51KRY5PQnCe0IRtnfgJXJ9s38nLuOeiQNBatmbFzlZDG4AxAHNKpymV4zdbuhGzqK3VddFPHCIe-_9z7zsodDAf3leLpJvKGHxwt2Lc2-fnDQDb3e5LIZnIKDdpLkL0mfWUMUtAODyeKc84HMigRgfb8jWYcz7MAGMo9GLE5ntQI3DhZ7mLm7v29ja-XYBFnmwMZ7NcTdPhJGfqCWGP91AG462Q52Tluq1F-tnSGCXv7fE7mUaooTVj8cbpjqnY0pp1xdhyP1Kg5rEa3tKx0Wngmqqpaw7a&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3Da4349929fc7c464f9a56518bc6141508%26src%3Dhttp%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-10-14%2F59e1bba9e3d9f.jpg&click_t=1522475728430&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=QJvyPLO1Bs1ciktHqvVOx8iWXsRueAZUIqcn-l6aiB1Ef6bxYhW1sc_7sVTM1seccDN3wlN9VhIJqm-x5wc-DqjSJ8rDBZMg-I_xqViF0_pQhiOv8vYCwoH_Ye8VxKoNN4TZOhZKd8DkixB3rcAD7S4M-ChdT5v_TkHLfAPr-j0p8Bz1VN2md27Y5q3G7AnctxDoG94GfHqCG1sPcoYVc1-cL20GXPWR1kW84Wwlm-P4gPbnFXO9MotTZIwVh0jdkYJ0PnDrFN6nuQ-9iEjICgoZkh41RbpZqAkGhAq56JPc3jEFAk4dF7KaiVqFhJxaJGsLbu4Ai_vUmiLQDx8mnhfGFgJ5THRqIEUJDY7dJ_RaQT-X7AEJYdJS4WDbjj5R0ICfNS66Gj_Sr1muZFKLW-tdMiwUM8ppKaVN5V151qLBlXp3q2b9bkRkb7nW5vPZZSMZ92vrkxQAiUhy7xcQk93H3I0gn8_ABcnmKI7xde6vYSyzo--ARvr1qvfggbc7B6iIl12iATpmOFtMi9wvmcYp2Cre62B_NgN0FZ6QeoWs9hf7C-pFjGdDN9x0LprwaCMSATNU-YcZbq_yMnpotHzTFi6pFYBo0XWWHULAt8y&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3Dde05721abb3352e0bf4f1b6435a30f5a%26src%3Dhttp%3A%2F%2Fimage5.tuku.cn%2Fpic%2Fwallpaper%2Fmeinv%2Fmeikongxingganmeinvxiezhenbizhi%2F005.jpg&click_t=1522475742745&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=vekv8G_QZerZrdU4KsGPwS7n2YwRmaoLuxOZR5dGZoQcViSh3udocEOu-99E29cABFyugnYHpk9vg8Q3Ejo0i1LEpEXx5w7Ap1gEjow0PmNOxST0EFVHaAL2fPiijiEAcZnRQnlvQfSFNoSXVTzESd89EbLsZf8elTyoiaFZjT2tCuJ6YGcbSSWvLEJZ8VAWBy6HXZbT3xOvY5cqwlEUOjEy4XZRks900dne7tS4LXcR-j37ZtIpOmo4yezTEyJg5o541NW1xkp3gUiDEAG5YO387vUHLehOosopjZgdIUiTitGHXOVKH6ObKWDxqbvjuyi0mQCGkPGz8b6JXJmHv8xGPXdquVrCt7Ig5R-eNGWMS8JobnRWtpFgDI7QPms9JuE6B7_SlIVIbwI5fgBXp5dBDAwpgneM_0j2z1MLA4CSgBrqHmyTc_Sbcr76SW1eq9ETWWka2uoGFZ8N7lnvHtq0fWQ4NeybawPoE2tW_lHXUGUxwk3BfF3QBVxLOEmP-R63o3uGMNRxgZC8JAvSGM50kmKgbayku4d0CmcuYyKhLnKs-h9b5BEIHT85LsL6u0BYhzwbHCY0BFyqc2D5LKw6Tx2ZzVnSS08avnbJ1LbBRGyA91Vt_IC39On9zn8O&timg=&click_t=1522475698390&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=dnfPa_1n_OQ65rTKa_ov4VHPBwSNOGh7DGPbVNY-Ut0bYE0N7OL1JvBho2avc4_Hn0diS-Vwu9kTfqETOKvBhJnHb-PGBucQQxwawC_6wNE8OnxrKM167vpcxzjgYtQ59QVFrr5dkne7AI2uSPfREtU992YGrHrGb75AWWX_5vhC4km41j4RIw2A4Quh7RIkfCdUrQzXL-12knFz6mzdNjVltlmUl8P5hVLw94L7uR9yEAGCgYkzQtQRO06vKw1gUZkBZrROGFMUhqLyc_1XVCgvM2n1b1ahUMDsMqbeL_uROJqWK69I_xbGrAd1rCvylo63izY6ak_MdpwRis2TJxGMthZZ9x2qS9_43JMpfRXOLk46qIm8ZOOPEvSUYAnHndcn_b5yZrrC-PpC8o6G8EcP-UkG-HDfyamCS721ZlIyHHK0ZKOYR02_kz58alPforDEhPjgTY1T6jJPNMxy9R5HsWtXqLevmTidxUw_Q47bn3MV2e86jHxphk6ag2dfJemsAdxZs6VUyUxulxo5GdmNCyoQgVzYBdIf2bEdeo11INYLRfT_SS2zROjMdPSCOmFf9XpPu6VTriGBlufUTK&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3D52ad19a3381d018bc0d31076f2be9e16%26src%3Dhttp%3A%2F%2Fimg01.taopic.com%2F160625%2F235106-1606250Q05845.jpg&click_t=1522475714287&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=8Yey44QkliuqsOuEN89WUZcEpG53KSUxqt8cVh98zjCeYP2piYLh2w3g2x7qU8tzUmFTcN7PjI-L8ey6BqHhegXVGXnQX8MGxw9ml6-lWYu79B4DbXhL6OISD-U5aYh6HfznAgP9wF5xd2Uvg1OsW19yEuxMTo_up2ouRNVmf8vpmpsX1PpBCZpfQdh0dNMf36-5xtHUDnPnNOGHHE8HpIqZBVjG72nmbdGLdinfFDEqYNELvQxMOQLD_V_AzTXAQiypt8SnXkwSEGKXybQ_JzfaGQBgFm-uOC96WMgpw_Q90N6B8H7rCJ_51KRY5PQnCe0IRtnfgJXJ9s38nLuOeiQNBatmbFzlZDG4AxAHNKpymV4zdbuhGzqK3VddFPHCIe-_9z7zsodDAf3leLpJvKGHxwt2Lc2-fnDQDb3e5LIZnIKDdpLkL0mfWUMUtAODyeKc84HMigRgfb8jWYcz7MAGMo9GLE5ntQI3DhZ7mLm7v29ja-XYBFnmwMZ7NcTdPhJGfqCWGP91AG462Q52Tluq1F-tnSGCXv7fE7mUaooTVj8cbpjqnY0pp1xdhyP1Kg5rEa3tKx0Wngmqqpaw7a&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3Da4349929fc7c464f9a56518bc6141508%26src%3Dhttp%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-10-14%2F59e1bba9e3d9f.jpg&click_t=1522475728430&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},
            {src:'https://www.baidu.com/link?url=QJvyPLO1Bs1ciktHqvVOx8iWXsRueAZUIqcn-l6aiB1Ef6bxYhW1sc_7sVTM1seccDN3wlN9VhIJqm-x5wc-DqjSJ8rDBZMg-I_xqViF0_pQhiOv8vYCwoH_Ye8VxKoNN4TZOhZKd8DkixB3rcAD7S4M-ChdT5v_TkHLfAPr-j0p8Bz1VN2md27Y5q3G7AnctxDoG94GfHqCG1sPcoYVc1-cL20GXPWR1kW84Wwlm-P4gPbnFXO9MotTZIwVh0jdkYJ0PnDrFN6nuQ-9iEjICgoZkh41RbpZqAkGhAq56JPc3jEFAk4dF7KaiVqFhJxaJGsLbu4Ai_vUmiLQDx8mnhfGFgJ5THRqIEUJDY7dJ_RaQT-X7AEJYdJS4WDbjj5R0ICfNS66Gj_Sr1muZFKLW-tdMiwUM8ppKaVN5V151qLBlXp3q2b9bkRkb7nW5vPZZSMZ92vrkxQAiUhy7xcQk93H3I0gn8_ABcnmKI7xde6vYSyzo--ARvr1qvfggbc7B6iIl12iATpmOFtMi9wvmcYp2Cre62B_NgN0FZ6QeoWs9hf7C-pFjGdDN9x0LprwaCMSATNU-YcZbq_yMnpotHzTFi6pFYBo0XWWHULAt8y&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1522475695%26di%3Dde05721abb3352e0bf4f1b6435a30f5a%26src%3Dhttp%3A%2F%2Fimage5.tuku.cn%2Fpic%2Fwallpaper%2Fmeinv%2Fmeikongxingganmeinvxiezhenbizhi%2F005.jpg&click_t=1522475742745&s_info=1349_662&wd=&eqid=e70297060002d9aa000000065abf22af'},

          ]
    }
  },
  components: {vueAccordion}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.acClass{
  width: 100%;height: 100%;opacity: 1;
}
.vue-accordion {
  width: 100%;
  overflow: hidden;
  height: 400px;
 width:80%;margin-left:10%;
}
.vue-accordion ul li{
  display: table-cell;
  width: 50%;
  background-repeat: no-repeat;
  background-position: 50%;
  transition: all .5s ease;
  background-image: url("./img/12345.png")
}
.vue-accordion ul {
  background-image: url("./img/12345.png")
}
</style>
